<%inherit file="../base.html"/>
<%def name="css()">
<link type="text/css" rel="stylesheet" href="/css/zTreeStyle.css" />
</%def>
<%def name="js()">
<script type="text/javascript" src="/js/jquery.ztree-2.6.js"></script>
<script>
    var zTree1, zTree2;
    $(document).ready(function(){
        zTree1 = $('#treeDemo1').myTree(${city_list}, 'city');
        zTree2 = $('#treeDemo2').myBranch(${alpha_list}, 'city', 'alpha', {'edit_removeBtn':false, 'edit_renameBtn':false});
    });
</script>
</%def>
<%def name="title()">r-pac - Access</%def>
<div class='submenu' id="function-menu">
    <ul><li class='li-start'></li><li class='li-end'></li></ul>
</div>
<div class="breadcrumbs">
    <a href="/admin">Admin</a> › City
</div>
<div id="main">
    <div class="boxTree">
        <input type="button" value="Expand" onclick="zTree1.zTreeExpand(true)"/>
        <input type="button" value="Close" onclick="zTree1.zTreeExpand(false)"/>
        <input type="button" value="Add" onclick="zTree1.zTreeAdd()"/>
        <input type="button" value="Set Alpha" onclick="zTree1.setBranch('alpha', zTree2.zTree)"/>
        <ul id="treeDemo1" class="tree"></ul>
    </div>
    <div class="boxTree">
        <input type="button" value="Cancel Alpha" onclick="zTree2.cancelBranch()"/>
        <ul id="treeDemo2" class="tree"></ul>
    </div>
</div>
